<template>
	<view class="datAnalise">
		<image src="../../../static/image/活动1@2x.png" mode="widthFix"></image>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#0b0a34"
				@clickItem="onClickItem" />
		</view>
		<!-- <view id="mycharts" style="width:500px;height: 300px;">
			
		</view> -->
		<view style="width:100%; height:750rpx;">
			<l-echart ref="chartRef"></l-echart>
		</view>

	</view>
</template>

<script setup>
	import * as echarts from 'echarts'
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const items = ref(['按年查询', '按月查询', '按日查询'])
	// 获取容器的dom元素
	const chartRef = ref(null)
	// echart图表的配置信息
	const Options = ref({})

	onMounted(() => {
		addPie()
	})

	onLoad((options) => { //获取路由参数
		console.log(options)

	})

	// 加载饼图结构
	const addPie = async () => {
		const MyPie = await chartRef.value.init(echarts)
		Options.value = {
			xAxis: {
				data: ['1月', '2月', '3月', '4月', '5月', '6月']
			},
			yAxis: {},
			series: [{
				type: 'bar',
				itemStyle: {
					// 柱状图的颜色
					color: '#09137b',
					borderRadius: [5, 5, 0, 0] // 这里设置圆角的大小
				},
				barWidth: 20,
				data: [23, 24, 18, 25, 27, 28, 25],
				label: {
					show: true, // 显示文字
					position: 'top', // 在柱状图上方显示
					// 可以通过 formatter 自定义显示的文本
					formatter: '{c}' // {c} 表示数据值
				}
			}]
		};
		MyPie.setOption(Options.value)
	}
</script>

<style lang="scss">
	.datAnalise {
		width: 100%;
		height: 100%;

		image {
			width: 100%
		}
	}
</style>